<template>
  <div class="my-counter">

    <!-- <button type="button" class="btn btn-light" :disabled="obj.goods_count === 1" @click="subFn">-</button> -->
    <button type="button" class="btn btn-light" @click="subFn">-</button>

    <input type="number" class="form-control inp" :value="obj.goods_count" @input="inputFn">
    <!-- <input type="number" class="form-control inp" v-model.number="allCount"> -->


    <button type="button" class="btn btn-light" @click="addFn">+</button>
    
  </div>
</template>

<script>
import {mapMutations,mapState} from 'vuex'
export default {
  props: {
    obj: Object, // 商品对象
    index:Number
  },
  // 因为数量控制要通过对象"互相引用的关系"来影响外面对象里的数量值, 所以最好传 对象进来
  watch: {
    obj: {
      deep: true,
      handler(){ // 拿到商品数量, 判断小于1, 强制修改成1
        if (this.obj.goods_count < 1) {
          this.obj.goods_count = 1
        }
      }
    }
  },
  methods:{
    ...mapMutations('cart',['subCount','addCount','setCount']),
    subFn(){//需要全局的变量，遍历的index，因此还是需要父传子
      this.subCount(this.index)
    },
    addFn(){
      this.addCount(this.index)
    },
    inputFn(e){
      // this.setCount(index,+e.target.value)
      this.setCount(this.index,e.target.value)
    }
  },
  computed:{
    ...mapState('cart',['allCount'])
    
  }
}
</script>

<style lang="less" scoped>
.my-counter {
  display: flex;
  .inp {
    width: 45px;
    text-align: center;
    margin: 0 10px;
  }
  .btn, .inp{
    transform: scale(0.9);
  }
}
</style>